<template>
<a-modal
    :visible="visible"
    class="contacts-manage-modal"
    :footer="null"
    :title="title"
    :maskClosable="false"
    :destroyOnClose="true"
    :keyboard="false"
    width="80%"
    @cancel="closeModal()">
  <search-table :url="url" :defaultParams="defaultParams" ref="searchtable" :columns="columns" class="contacts-table">
    <template slot="oprationRow">
      <permission authority="supplier:contacts:add">
        <a-button @click="openInfo()" type="primary" icon="plus">新增</a-button>
      </permission>
      <permission authority="supplier:contacts:delete">
          <a-button @click="deleteRows($refs.searchtable.selectedRowKeys)" type="danger" icon="delete">删除</a-button>
      </permission>
    </template>
    <template slot="tableOperation" slot-scope="{record}">
      <permission authority="supplier:contacts:modify">
        <span class="text-primary pointer" @click="openInfo(record)">修改</span>
      </permission>
      <permission authority="supplier:contacts:delete">
        <a-divider type="vertical" />
        <span class="text-danger pointer" @click="deleteRows([record.id])">删除</span>
      </permission>
    </template>
  </search-table>
  <contacts-info :supplierInfo="record" :record="currentRecord" @cancel="closeContactsModal" :visible="infoVisible" />
</a-modal>
</template>
<script>
import ContactsInfo from './ContactsInfo'
export default {
  name: 'contacts-manage',
  components: {
    ContactsInfo,
  },
  props:{
    record: {
      type: Object,
    },
    visible: {
      type: Boolean,
      default: false
    },
  },
  computed: {
    title () {
      return `联系人管理：${this.record.supplierName}`
    },
    defaultParams () {
      return {
        supplierId: this.record.id
      }
    }
  },
  data () {
    return {
      url: '/supplier/contacts/page',
      dataSource: [],
      currentRecord: {},
      infoVisible: false,
      columns: [
        {
          title: '联系人姓名',
          dataIndex: 'contactName',
        },
        {
          title: '手机号',
          dataIndex: 'phoneNum',
        },
        {
          title: '固定电话',
          dataIndex: 'telphoneNum',
        },
        {
          title: '传真',
          dataIndex: 'faxNum',
        },
        {
          title: '邮箱',
          dataIndex: 'emailAddress',
        },
        {
          title: '微信',
          dataIndex: 'wechatNum',
        },
        {
          title: 'QQ',
          dataIndex: 'qqNum',
        },
        {
          title: '操作',
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operation' },
        },
      ],
    }
  },
  methods: {
    closeContactsModal (flag) {
      this.infoVisible = false
      this.currentRecord = {}
      if (flag) {
        this.$refs.searchtable.refreshTable()
      }
    },
    openInfo (record) {
      this.currentRecord = record || {}
      this.infoVisible = true
    },
    deleteRows (ids) {
      if (!(ids && ids.length)) return this.$message.warn('请先选择一项后再进行操作')
      this.$confirm({
        title: '删除提示',
        content: '删除操作不可恢复，请确认是否删除？',
        okText: '确认删除',
        cancelText: '取消',
        onOk: ()=> {
          return new Promise((resolve, reject)=> {
            this.$post('/supplier/contacts/delete', ids).then(res => {
              if (res && res.returnCode == 1000) {
                this.$message.success('删除成功')
                this.$refs.searchtable.refreshTable()
                resolve()
              } else {
                reject()
              }
            }).catch(err=> reject())
          })
        }
      })
    },
    closeModal () {
      this.$emit('cancel')
    }
  }
}
</script>
